<template>
    <div class="station-card">
      <!-- 自定义标题栏 -->
      <div class="card-header">
        <div class="card-title">{{ data.name || '工位信息' }}</div>
        <div class="status-indicator" :class="statusClass"></div>
      </div>
      
      <!-- 3列数据区域 -->
      <div class="data-grid">
        <div class="data-item">
          <span class="label">产品SN</span>
          <span class="value">{{ data.sn }}</span>
        </div>
        <div class="data-item">
          <span class="label">工艺名称</span>
          <span class="value">{{ data.name }}</span>
        </div>
        <div class="data-item">
          <span class="label">进站时间</span>
          <span class="value">{{ data.enterTime }}</span>
        </div>
        <div class="data-item">
          <span class="label">出站时间</span>
          <span class="value">{{ data.exitTime || '未出站' }}</span>
        </div>
        <div class="data-item">
          <span class="label">处理时间</span>
          <span class="value" :class="processTimeClass">{{ data.proccessTime || '计算中' }}</span>
        </div>
        <div class="data-item">
          <span class="label">加工结果</span>
          <span class="value" :class="processTimeClass">{{ data.result || '计算中' }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  
  // 接收父组件参数
  const props = defineProps({
    data:{ type:Object ,default:{
        title: { type: String, default: '工位信息' },
        sn: { type: String, default: 'SN20230725001' },
        name: { type: String, default: '精密组装' },
        enterTime: { type: String, default: '2023-07-25 09:15:30' },
        exitTime: { type: String, default: '' },
        processTime: { type: String, default: '' }
    } }
  });
  
  // 状态样式计算
  const statusClass = computed(() => {
    return props.exitTime ? 'status-completed' : 'status-processing';
  });
  
  // 处理时间样式（超时高亮）
  const processTimeClass = computed(() => {
    if (!props.processTime) return '';
    const minutes = parseInt(props.processTime);
    return minutes > 30 ? 'time-over' : '';
  });
  </script>
  
  <style scoped>
  /* 基础样式保持不变，重点调整字体单位为vw */
  .station-card {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #0a2a66, #082459);
    border: 1px solid rgba(100, 149, 237, 0.2);
    border-radius: 0.4vw; /* 圆角也用vw适配 */
    padding: 0.5vw; /* 内边距用vw */
    box-shadow: 0 0.2vw 1vw rgba(0, 10, 30, 0.3);
    color: #e6eefc;
    box-sizing: border-box;
  }
  
  /* 标题栏样式（vw单位） */
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(100, 149, 237, 0.3);
  }
  
  .card-title {

   font-size: clamp(16px,1.1vw,18px); /* 标题字体：1.1%视口宽度 */
    font-weight: 600;
    color: #4da6ff;
  }
  
  /* 状态指示器（尺寸用vw） */
  .status-indicator {
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 50%;
  }
  .status-processing {
    background-color: #4cd964;
    box-shadow: 0 0 0.4vw rgba(76, 217, 100, 0.6);
  }
  .status-completed {
    background-color: #ffcc00;
    box-shadow: 0 0 0.4vw rgba(255, 204, 0, 0.6);
  }
  
  /* 3列数据网格（间距用vw） */
  .data-grid {
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5vw 1vw; /* 行/列间距用vw */
  }
  
  /* 数据项样式（字体用vw） */
  .data-item {
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
  }
  
  .label {
    font-size: 0.8vw; /* 标签字体：0.8%视口宽度 */
    color: #8da5c8;
    opacity: 0.9;
  }
  
  .value {
    font-size: 1vw; /* 值字体：1%视口宽度 */
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 处理时间占2列 */
  .data-item-merge {
    grid-column: span 2;
  }
  
  /* 超时样式 */
  .time-over {
    color: #ff6b6b;
    font-weight: 600;
  }
  </style>